<script setup lang="ts">
// 导入Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

// 导入控制器和模型
import { SSHDetectorController } from '../controllers/sshDetectorController'
import { SSHDetectorModel } from '../models/sshDetectorModel'

// 初始化控制器和模型
const controller = new SSHDetectorController()
const model = new SSHDetectorModel()

// 导入工具方法
import { getStatusText, getStatusClass } from '../utils/ssh'
// 导入统计面板
import StatsPanel from '../components/StatsPanel.vue'

// 导出模型属性供模板使用
const {
  formData,
  results,
  loading,
  error,
  filterStatus,
  progress,
  current,
  total,
  progressMessage,
  currentPage,
  pageSize,
  filteredResults,
  totalPages,
  paginatedResults,
  displayedPages,
  handlePageChange,
  handlePageSizeChange,
  clearResults
} = model

// 检测方法
const detectSSH = async () => {
  try {
    await controller.detectSSH(
      model.formData.value,
      (data) => {
        model.progress.value = data.progress
        model.current.value = data.current
        model.total.value = data.total
        model.progressMessage.value = data.message
      },
      (results) => {
        model.results.value = results
      },
      (message) => {
        model.error.value = message
      }
    )
  } catch (err) {
    model.error.value = err instanceof Error ? err.message : '检测失败'
  }
}

// 导出方法
const handleExport = () => {
  return controller.handleExport(model.results.value, getStatusText)
}
</script>

<template>
  <div class="container-fluid p-4">
    <!-- 表单部分 -->
    <form @submit.prevent="detectSSH" class="card mb-4">
      <div class="card-body">
        <div class="row g-3">
          <div class="col-md-6">
            <label for="network" class="form-label">网段 (CIDR格式):</label>
            <input
              type="text"
              id="network"
              class="form-control"
              v-model="formData.network"
              placeholder="例如: 192.168.1.0/24"
              required
            />
          </div>
          <div class="col-md-6">
            <label for="port" class="form-label">端口:</label>
            <input
              type="number"
              id="port"
              class="form-control"
              v-model="formData.port"
              placeholder="默认: 22"
              required
            />
          </div>
          <div class="col-md-6">
            <label for="username" class="form-label">用户名:</label>
            <input
              type="text"
              id="username"
              class="form-control"
              v-model="formData.username"
              placeholder="SSH用户名"
              required
            />
          </div>
          <div class="col-md-6">
            <label for="password" class="form-label">密码:</label>
            <input
              type="password"
              id="password"
              class="form-control"
              v-model="formData.password"
              placeholder="SSH密码"
              required
            />
          </div>
        </div>
        <div class="d-flex justify-content-end mt-3">
          <button type="submit" class="btn btn-primary" :disabled="loading">
            {{ loading ? '检测中...' : '开始检测' }}
          </button>
        </div>
      </div>
    </form>

    <!-- 统计面板 -->
    <StatsPanel class="mb-4" />

    <!-- 进度条 -->
    <div v-if="loading" class="card mb-4">
      <div class="card-body">
        <div class="progress mb-2">
          <div 
            class="progress-bar" 
            role="progressbar" 
            :style="{ width: `${progress}%` }"
            :aria-valuenow="progress"
            aria-valuemin="0"
            aria-valuemax="100"
          ></div>
        </div>
        <div class="text-center">检测进度: {{ progress }}%</div>
      </div>
    </div>

    <!-- 错误信息 -->
    <div v-if="error" class="alert alert-danger mb-4">
      {{ error }}
    </div>

    <!-- 结果列表 -->
    <div v-if="results.length > 0" class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-4">
          <h2 class="h5 mb-0">检测结果</h2>
          <div class="d-flex gap-3">
            <div class="input-group" style="width: 250px;">
              <label class="input-group-text" for="status-filter">状态筛选:</label>
              <select 
                id="status-filter" 
                class="form-select"
                v-model="filterStatus"
              >
                <option value="all">全部</option>
                <option value="port_closed">端口未开启</option>
                <option value="auth_failed">认证失败</option>
                <option value="connected">连接成功</option>
                <option value="sudo_supported">支持sudo</option>
              </select>
            </div>
          </div>
        </div>

        <div class="table-responsive">
          <table class="table table-hover">
            <thead class="table-light">
              <tr>
                <th>时间</th>
                <th>IP地址</th>
                <th>端口</th>
                <th>用户名</th>
                <th>状态</th>
                <th>详细信息</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="result in paginatedResults" :key="result.timestamp" :class="getStatusClass(result.status)">
                <td>{{ new Date(result.timestamp).toLocaleString() }}</td>
                <td>{{ result.request.network }}</td>
                <td>{{ result.request.port }}</td>
                <td>{{ result.request.username }}</td>
                <td>{{ getStatusText(result.status) }}</td>
                <td>{{ result.info }}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 分页控件 -->
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mt-4">
          <div class="mb-2 mb-md-0">
            显示 {{ (currentPage - 1) * pageSize + 1 }}-{{ Math.min(currentPage * pageSize, filteredResults.length) }} 条，共 {{ filteredResults.length }} 条
          </div>
          <div class="d-flex flex-column flex-md-row align-items-center gap-3">
            <div class="input-group" style="width: 150px;">
              <label class="input-group-text" for="page-size">每页:</label>
              <select 
                id="page-size" 
                class="form-select"
                v-model="pageSize" 
                @change="handlePageSizeChange"
              >
                <option :value="10">10</option>
                <option :value="20">20</option>
                <option :value="50">50</option>
                <option :value="100">100</option>
              </select>
            </div>
            <nav v-if="filteredResults.length > 0">
              <ul class="pagination mb-0">
                <li class="page-item" :class="{ disabled: currentPage === 1 }">
                  <button 
                    class="page-link"
                    @click="handlePageChange(currentPage - 1)"
                  >
                    上一页
                  </button>
                </li>
                <li v-for="page in displayedPages" :key="page" class="page-item" :class="{ active: currentPage === page }">
                  <button 
                    class="page-link"
                    @click="handlePageChange(page)"
                  >
                    {{ page }}
                  </button>
                </li>
                <li class="page-item" :class="{ disabled: currentPage === totalPages }">
                  <button 
                    class="page-link"
                    @click="handlePageChange(currentPage + 1)"
                  >
                    下一页
                  </button>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 只保留状态类样式，其他样式由Bootstrap处理 */
.port-closed {
  color: #dc3545;
}

.auth-failed {
  color: #ffc107;
}

.connected {
  color: #28a745;
}

.sudo-supported {
  color: #17a2b8;
}
</style>